<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<script src="./jquery-3.4.1.min.js"></script>
<body>
    <table class="table table-responsive table-hover table-striped table-condensed">
        <div>
            <button id="insert" class="btn btn-info btn-sm">新增</button>
            <button id="delete" class="btn btn-info btn-sm">删除</button>
            <button id="edit" class="btn btn-info btn-sm" >编辑</button>
            <button id="query" class="btn btn-info btn-sm">查询</button> 
           <input id="id" style="width: 100px; height: 30px;display: inline;" type="text" class="form-control" placeholder="按工号查询">
            <input id="name" style="width: 100px; height: 30px;display: inline;" type="text" class="form-control" placeholder="按姓名查询">
        </div>
        <script>
            var count=1005;
            var i=1;
           $("#insert").click( function(){ 
            var name = prompt("请输入你的姓名:");
            var sex = prompt("请输入你的性别:");
            var pwd = prompt("请输入你的密码:");
            var age = prompt("请输入你的年龄:");
            var birthday = prompt("请输入你的生日:");
            
            var newtr ;
            if(i%2==1){
                newtr=$("<tr class=\"info\"><td><input class=\"one\" type=\"checkbox\"></td><td>"+count+"</td><td>"+name+"</td><td>"+sex+"</td><td>"+pwd+"</td><td>"+age+"</td><td>"+birthday+"</td></tr>");
            $("#body").append(newtr);
            i++;
            }else{
                newtr=$("<tr class=\"warning\"><td><input class=\"one\" type=\"checkbox\"></td><td>"+count+"</td><td>"+name+"</td><td>"+sex+"</td><td>"+pwd+"</td><td>"+age+"</td><td>"+birthday+"</td></tr>");
            $("#body").append(newtr);
            i++;
            }
            count++;
            }); 
            
        </script>
        <script>
            $("#delete").click(function(){
                var arr=document.getElementsByClassName("one");             
                for(var i=0;i<arr.length;i++){
               if( arr[i].checked)
               {
                   $("#body tr").eq(i).remove();
               }
            }          
            });
        </script>
        <script>
            $("#edit").click(function(){
                var arr=document.getElementsByClassName("one"); 
                for(var i=0;i<arr.length;i++){
               if( arr[i].checked)
               {
                var name = prompt("请输入你的姓名:");
                var sex = prompt("请输入你的性别:");
                var pwd = prompt("请输入你的密码:");
                var age = prompt("请输入你的年龄:");
                var birthday = prompt("请输入你的生日:");
                var arryTest=[name,sex,pwd,age,birthday];
                for(var j=0;j<5;j++){
                    $("#body tr td").eq(j+2).text(arryTest[j]);
                }                              
               }
            }    
            });
        </script>
        <script>
            $("#query").click(function(){
               var id= $("#id").val();
               var name=$("#name").val();
               alert(name);              
               if(id != null&name==""){
                var trs= $("#body tr");
               for(var i=0;i<trs.length;i++){
                if( trs.eq(i).children("td:eq(1)").text()==id){   
                    continue;
                }
                trs.eq(i).css("display","none");
               }
               }else if(name!=null&id==""){                 
                var trs= $("#body tr");
               for(var i=0;i<trs.length;i++){
                if( trs.eq(i).children("td:eq(2)").text()==name){   
                    continue;
                }
                trs.eq(i).css("display","none");
               }
               }else{
                alert('shibai');
               }

            });
        </script>
        <thead>
            <th>序号</th>
            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>密码</th>
            <th>年龄</th>
            <th>出生日期</th>
        </thead>     
        <tbody id="body"  >
            <tr class="info">
                <td><input class="one" type="checkbox" ></td>
                <td>1001</td>
                <td>张三</td>
                <td>女</td>
                <td>123</td>
                <td>29</td>
                <td>1990-11</td>
            </tr>
            <tr  class="warning">
                <td><input  class="one" type="checkbox"></td>
                <td>1002</td>
                <td>李四</td>
                <td>男</td>
                <td>123</td>
                <td>28</td>
                <td>1988-11</td>
            </tr>
            <tr class="info">
                <td ><input class="one" type="checkbox"></td>
                <td>1003</td>
                <td>王五</td>
                <td>女</td>
                <td>123</td>
                <td>27</td>
                <td>1988-11</td>
            </tr>
            <tr class="warning">
                <td><input class="one" type="checkbox"></td>
                <td>1004</td>
                <td>赵六</td>
                <td>男</td>
                <td>123</td>
                <td>26</td>
                <td>1985-11</td>
            </tr>
        </tbody>
    </table>
</body>
   

</html>